<template>
    <el-dialog :model-value="show" title="设置排序" @close="cancel" width="40%">
        <div class="box">
            <span>排序:</span>
            <el-input v-model="input.sort" />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submit"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ElMessageBox, ElMessage } from "element-plus";
import { reactive, ref, watch } from "vue";
import {
    sortBrandAPI, sortNewProductAPI, sortRecommendProductAPI, sortRecommendSubjectAPI
} from "../api"
import { useRouter } from "vue-router";

const router = useRouter();
const path = router.currentRoute.value.path;
// console.log(path);

// 点击确定按钮
const submit = () => {
    ElMessageBox.confirm('是否要修改排序?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        // 判断路由地址是否相等
        if (path === "/sms/homeBrand") {
            sortBrandAPI(props.id, input.sort).then((res) => {
                if (res.code === 200) {
                    emit('hide', true)
                    ElMessage.success("修改成功")
                }
            });
        } else if (path === "/sms/homeNew") {
            sortNewProductAPI(props.id, input.sort).then((res) => {
                if (res.code === 200) {
                    emit('hide', true)
                    ElMessage.success("修改成功")
                }
            });
        } else if (path === "/sms/homeHot") {
            sortRecommendProductAPI(props.id, input.sort).then((res) => {
                if (res.code === 200) {
                    emit('hide', true)
                    ElMessage.success("修改成功")
                }
            });
        } else if (path === "/sms/homeSubject") {
            sortRecommendSubjectAPI(props.id, input.sort).then((res) => {
                if (res.code === 200) {
                    emit('hide', true)
                    ElMessage.success("修改成功")
                }
            });
        }
    }).catch(() => { ElMessage.success("已取消操作") })
}
const emit = defineEmits(["hide"]);
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    id: {
        type: Number,
        default: 0,
    },
    sort: {
        type: Number,
        default: 0,
    },
});

// 设置传入的sort为输入框的默认值
const input = reactive({
    sort: 0
});

watch(() => props.id, () => {
    if (props.id !== 0) {
        // Object.assign(input, props.sort)
        input.sort = props.sort
    }
})
const cancel = () => {
    //关闭对话框
    emit("hide");
};


</script>

<style lang="less" scoped>
.box {
    padding: 20px;
    margin-left: 100px;
}

:deep(.el-input) {
    margin-left: 10px;
    width: 200px;
}
</style>